Flutter AppBar and Scaffold

In Flutter, Scaffold and AppBar are two of the most commonly used Material Design widgets for building application screens. Scaffold provides the basic screen structure, while AppBar creates the top navigation and title area of the screen.

According to the official Flutter API, Scaffold provides the basic Material Design visual layout structure, while AppBar is a Material Design app bar that is typically placed in the Scaffold's appBar property.

1. What is Scaffold in Flutter?

Scaffold is a widget that provides the basic visual structure of a Flutter application screen. It provides predefined areas for an AppBar, body content, floating action button, drawer, bottom navigation bar, bottom sheet, and other screen-level components.

A typical Flutter screen can be structured like this:

MaterialApp
    |
    └── Scaffold
        ├── AppBar
        ├── Body
        ├── Drawer
        ├── FloatingActionButton
        └── BottomNavigationBar

Basic Scaffold Syntax

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Hello Flutter'),
  ),
)

2. Important Scaffold Properties

3. What is AppBar in Flutter?

AppBar is a Material Design widget used to create the top bar of an application screen. It commonly contains a title, navigation icon, menu buttons, search buttons, profile icons, or other actions.

An AppBar is normally used through the appBar property of Scaffold.

Basic AppBar Syntax

AppBar(
  title: Text('Home'),
)

4. AppBar Structure

An AppBar can contain several important areas:

AppBar
├── leading
├── title
├── actions
├── bottom
└── flexibleSpace

5. Creating a Basic Scaffold with AppBar

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Flutter App'),
        ),
        body: const Center(
          child: Text(
            'Welcome to Flutter',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Output Structure

--------------------------------
| My Flutter App               |
--------------------------------
|                              |
|       Welcome to Flutter     |
|                              |
--------------------------------

6. AppBar with Background Color

The backgroundColor property can be used to customize the AppBar background.

Scaffold(
  appBar: AppBar(
    title: const Text('Dashboard'),
    backgroundColor: Colors.blue,
  ),
  body: const Center(
    child: Text('Dashboard Content'),
  ),
)

7. AppBar with Title Styling

The title can be customized using TextStyle.

AppBar(
  title: const Text(
    'Flutter App',
    style: TextStyle(
      fontSize: 22,
      fontWeight: FontWeight.bold,
    ),
  ),
)

8. AppBar with Leading Widget

The leading property is commonly used for a menu button or back button.

AppBar(
  leading: IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () {
      print('Menu clicked');
    },
  ),
  title: const Text('Home'),
)

9. AppBar with Actions

The actions property accepts a list of widgets. It is commonly used for search, notifications, settings, favorites, and profile actions.

AppBar(
  title: const Text('Home'),
  actions: [
    IconButton(
      icon: const Icon(Icons.search),
      onPressed: () {
        print('Search clicked');
      },
    ),
    IconButton(
      icon: const Icon(Icons.notifications),
      onPressed: () {
        print('Notification clicked');
      },
    ),
    IconButton(
      icon: const Icon(Icons.settings),
      onPressed: () {
        print('Settings clicked');
      },
    ),
  ],
)

10. AppBar with Popup Menu

A PopupMenuButton can be placed inside the AppBar actions to provide additional options.

AppBar(
  title: const Text('Profile'),
  actions: [
    PopupMenuButton(
      onSelected: (value) {
        print(value);
      },
      itemBuilder: (context) {
        return const [
          PopupMenuItem(
            value: 'profile',
            child: Text('Profile'),
          ),
          PopupMenuItem(
            value: 'settings',
            child: Text('Settings'),
          ),
          PopupMenuItem(
            value: 'logout',
            child: Text('Logout'),
          ),
        ];
      },
    ),
  ],
)

11. AppBar with Custom Icon

AppBar(
  title: const Text('My Profile'),
  leading: const Icon(Icons.person),
)

12. Centering the AppBar Title

The centerTitle property can be used when you want the title centered.

AppBar(
  centerTitle: true,
  title: const Text('Flutter'),
)

13. AppBar Elevation

The elevation property controls the visual elevation or shadow of the AppBar.

AppBar(
  title: const Text('Home'),
  elevation: 4,
)

A lower elevation creates a flatter appearance, while a higher elevation can create a stronger separation between the AppBar and the content.

14. Custom AppBar Height

The toolbarHeight property can be used to customize the height of the AppBar toolbar.

AppBar(
  toolbarHeight: 80,
  title: const Text('Custom AppBar'),
)

15. AppBar with TabBar

The bottom property of AppBar can be used to place a TabBar below the main toolbar.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Categories'),
      bottom: const TabBar(
        tabs: [
          Tab(text: 'Home'),
          Tab(text: 'Products'),
          Tab(text: 'Profile'),
        ],
      ),
    ),
    body: const TabBarView(
      children: [
        Center(child: Text('Home')),
        Center(child: Text('Products')),
        Center(child: Text('Profile')),
      ],
    ),
  ),
)

16. Scaffold with FloatingActionButton

Scaffold provides the floatingActionButton property for displaying a floating action button.

Scaffold(
  appBar: AppBar(
    title: const Text('My Tasks'),
  ),
  body: const Center(
    child: Text('Task List'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('Add task');
    },
    child: const Icon(Icons.add),
  ),
)

17. Scaffold with Drawer

A Drawer provides a side navigation panel. When an AppBar is used with a Scaffold containing a Drawer, Flutter can automatically provide a leading menu button.

Scaffold(
  appBar: AppBar(
    title: const Text('Home'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        const DrawerHeader(
          child: Text('Menu'),
        ),
        ListTile(
          leading: const Icon(Icons.home),
          title: const Text('Home'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        ListTile(
          leading: const Icon(Icons.settings),
          title: const Text('Settings'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
  body: const Center(
    child: Text('Home Screen'),
  ),
)

18. Scaffold with Bottom Navigation Bar

The bottomNavigationBar property allows you to create navigation controls at the bottom of the screen.

Scaffold(
  appBar: AppBar(
    title: const Text('Main App'),
  ),
  body: const Center(
    child: Text('Home'),
  ),
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: 0,
    items: const [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ],
  ),
)

19. Complete AppBar and Scaffold Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
        ),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Dashboard'),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              print('Search clicked');
            },
          ),
          IconButton(
            icon: const Icon(Icons.notifications),
            onPressed: () {
              print('Notifications clicked');
            },
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              child: Text('Navigation Menu'),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('Home'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.person),
              title: const Text('Profile'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: const Center(
        child: Text(
          'Welcome to Dashboard',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Add button clicked');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

20. AppBar and Scaffold Relationship

AppBar and Scaffold are usually used together. Scaffold provides the screen structure, while AppBar fills the top app-bar area.

Scaffold(
  appBar: AppBar(
    title: const Text('Home'),
  ),
  body: const Center(
    child: Text('Content'),
  ),
)

The basic relationship can be visualized as:

Scaffold
│
├── AppBar
│   ├── Leading
│   ├── Title
│   └── Actions
│
├── Body
│
├── FloatingActionButton
│
├── Drawer
│
└── BottomNavigationBar

21. AppBar vs Scaffold

22. AppBar with Search Action

Scaffold(
  appBar: AppBar(
    title: const Text('Products'),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () {
          print('Open search');
        },
      ),
    ],
  ),
  body: const Center(
    child: Text('Product List'),
  ),
)

23. AppBar with Back Button

When navigating to another route, an AppBar can automatically provide a back button when appropriate.

Scaffold(
  appBar: AppBar(
    title: const Text('Product Details'),
  ),
  body: const Center(
    child: Text('Product Information'),
  ),
)

You can also explicitly provide a back button:

AppBar(
  leading: IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () {
      Navigator.pop(context);
    },
  ),
  title: const Text('Details'),
)

24. Removing Automatic Leading Behavior

The automaticallyImplyLeading property controls whether Flutter automatically inserts a leading navigation widget when appropriate.

AppBar(
  automaticallyImplyLeading: false,
  title: const Text('Home'),
)

25. AppBar with Custom Leading Widget

AppBar(
  leading: Padding(
    padding: const EdgeInsets.all(8),
    child: CircleAvatar(
      child: const Icon(Icons.person),
    ),
  ),
  title: const Text('Profile'),
)

26. Scaffold Background Color

Scaffold(
  backgroundColor: Colors.grey.shade100,
  appBar: AppBar(
    title: const Text('Dashboard'),
  ),
  body: const Center(
    child: Text('Dashboard Content'),
  ),
)

27. Using ScaffoldMessenger with Scaffold

For displaying SnackBars, use ScaffoldMessenger.

ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('Saved successfully!'),
      ),
    );
  },
  child: const Text('Save'),
)

28. Complete Dashboard Example

import 'package:flutter/material.dart';

void main() {
  runApp(const DashboardApp());
}

class DashboardApp extends StatelessWidget {
  const DashboardApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
        ),
        useMaterial3: true,
      ),
      home: const DashboardPage(),
    );
  }
}

class DashboardPage extends StatelessWidget {
  const DashboardPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dashboard'),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.search),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.notifications),
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              child: Text(
                'My Application',
                style: TextStyle(fontSize: 22),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.dashboard),
              title: const Text('Dashboard'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.people),
              title: const Text('Users'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Card(
            child: ListTile(
              leading: const Icon(Icons.people),
              title: const Text('Total Users'),
              subtitle: const Text('12,450 users'),
            ),
          ),
          Card(
            child: ListTile(
              leading: const Icon(Icons.shopping_cart),
              title: const Text('Total Orders'),
              subtitle: const Text('3,240 orders'),
            ),
          ),
          Card(
            child: ListTile(
              leading: const Icon(Icons.attach_money),
              title: const Text('Revenue'),
              subtitle: const Text('₹8,45,000'),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('Add button clicked'),
            ),
          );
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: 0,
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
          NavigationDestination(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

29. AppBar Best Practices

• Keep the AppBar title short and meaningful.
• Use icons that clearly communicate their purpose.
• Use Tooltip for icon actions when additional clarification is useful.
• Do not overload the AppBar with too many actions.
• Use PopupMenuButton for less frequently used actions.
• Use a TabBar in the AppBar bottom area when the screen has tab-based content.
• Use consistent AppBar styling throughout the application.
• Use the application theme for reusable styling rather than repeating the same values on every screen.

30. Scaffold Best Practices

• Use one primary Scaffold for a normal application screen.
• Keep the main screen content inside the body property.
• Use ListView or another scrollable widget when content can exceed the available screen height.
• Use Drawer or NavigationDrawer for appropriate navigation patterns.
• Use FloatingActionButton for a prominent primary action.
• Use bottomNavigationBar or NavigationBar for top-level navigation when appropriate.
• Use ScaffoldMessenger for SnackBar messages.
• Use responsive layouts for different screen sizes.

31. Common Mistakes

Mistake 1: Putting the AppBar inside the body

Scaffold(
  body: Column(
    children: [
      AppBar(
        title: const Text('Home'),
      ),
    ],
  ),
)

For a standard fixed app bar, use the Scaffold's appBar property instead:

Scaffold(
  appBar: AppBar(
    title: const Text('Home'),
  ),
  body: const Center(
    child: Text('Content'),
  ),
)

Mistake 2: Too many AppBar actions

Putting too many icons into the AppBar can make the interface difficult to understand. Use a popup menu for secondary actions.

Mistake 3: Forgetting scrolling

If a screen contains more content than can fit vertically, use a scrollable widget such as ListView.

Scaffold(
  appBar: AppBar(
    title: const Text('Long Content'),
  ),
  body: ListView(
    children: [
      // Content
    ],
  ),
)

32. Interview Questions

Q1. What is Scaffold in Flutter?

Scaffold is a Material Design layout widget that provides common screen-level areas such as AppBar, body, drawer, floating action button, bottom navigation bar, and bottom sheet.

Q2. What is AppBar?

AppBar is a Material Design widget commonly used at the top of a Flutter screen for displaying a title, navigation controls, and actions.

Q3. Where is AppBar normally placed?

AppBar is normally assigned to the appBar property of Scaffold.

Q4. What is the difference between AppBar and Scaffold?

AppBar handles the top application bar, while Scaffold provides the overall screen structure.

Q5. What is the purpose of the actions property?

The actions property accepts a list of widgets that are displayed on the trailing side of the AppBar, commonly using IconButton widgets.

Q6. What is the purpose of the leading property?

The leading property is used for a widget placed before the AppBar title, commonly a menu button, back button, or custom navigation widget.

Q7. How can you add a floating button?

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
)

Q8. How can you add a Drawer?

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: const [
        ListTile(
          title: Text('Home'),
        ),
      ],
    ),
  ),
)

33. Practice Exercises

1. Create a Flutter screen with an AppBar titled Home.
2. Add a search icon and notification icon to the AppBar.
3. Change the AppBar background and title styling.
4. Create a Drawer containing Home, Profile, and Settings options.
5. Add a FloatingActionButton with an add icon.
6. Create an AppBar with three tabs using TabBar.
7. Create a dashboard using Scaffold, AppBar, Cards, and a bottom navigation bar.
8. Create a profile screen with a custom leading widget and AppBar actions.
9. Create a product screen with a search action and popup menu.
10. Build a complete Flutter screen using AppBar, Drawer, body, FloatingActionButton, and NavigationBar.

34. Key Takeaways

• Scaffold provides the basic structure of a Material Design screen.
• AppBar provides the top application bar.
• The AppBar is normally placed inside the Scaffold's appBar property.
• The Scaffold body contains the primary screen content.
• AppBar supports leading, title, actions, bottom, and flexibleSpace.
• Scaffold supports screen-level components such as drawers, floating action buttons, navigation bars, and bottom sheets.
• AppBar and Scaffold together form the foundation of many Flutter application screens.

35. Official Flutter Documentation

• Flutter AppBar API Documentation
• Flutter Scaffold API Documentation
• Scaffold AppBar Property
• Scaffold Body Property
• Flutter SliverAppBar Documentation

36. Flutter Training Resources

For structured Flutter training and course-related learning resources, visit:

• JustAcademy Flutter Training Course
• Register for Flutter Course Demo